<extend file="resource/view/site"/>
<link rel="stylesheet" href="{{__TEMPLATE__}}/css.css">
<block name="content">
    <ul class="nav nav-tabs" role="tablist">
        <li><a href="{{site_url('lists')}}">微信菜单管理</a></li>
        <li class="active"><a href="javascript:;">添加菜单</a></li>
    </ul>
    <form action="" method="post" id="form" class="form-horizontal ng-cloak" ng-cloak ng-controller="ctrl" onsuddbmit="return false;">
        <div class="well clearfix">
            <div class="col-sm-8">
                <h4><strong>菜单说明</strong></h4>
                <p>修改微信菜单后微信客户端需要一些时间才可显示,如果要即时看到效果,需要取消关注后再关注一下。</p>
            </div>
            <div class="col-sm-4 text-right">
                <input type="checkbox" name="status" value="1" class="bootstrap-switch" ng-checked="menu.status">
            </div>
        </div>
        <div class="button clearfix">
            <div class="mobile_view col-xs-4">
                <div class="mobile-header text-center">
                    <img src="resource/images/mobile_head_t.png" style="margin-top: 20px;">
                </div>
                <div class="mobile-body">
                    <img src="resource/images/mobile-header.png" style="width: 100%;">
                    <!--菜单显示区域-->
                    <div class="menu_html">
                        <div ng-repeat="(k,v) in data.button">
                            <h5>
                                <i class="fa fa-minus-circle" ng-click="removeTopButton(v)"></i>
                                <span ng-click="editTopMenu(k)">@{{v.name}}</span>
                            </h5>
                            <dl>
                                <dt ng-click="addSubButton(k)" ng-if="!v.sub_button || v.sub_button.length<5"><i class="fa fa-plus"></i></dt>
                                <dd ng-repeat="(i,m) in v.sub_button">
                                    <i class="fa fa-minus-circle" ng-click="removeSubButton(m,k)"></i>
                                    <span ng-click="editSubMenu(k,i)">@{{m.name}}</span>
                                </dd>
                            </dl>
                        </div>
                        <div ng-if="data.button.length<3">
                            <h5 ng-click="addTopButton()"><i class="fa fa-plus"></i> 添加菜单</h5>
                        </div>
                    </div>
                </div>
                <div class="mobile-footer">
                    <div class="home-btn"></div>
                </div>
            </div>
            <div class="slide col-xs-7" style="margin: 80px 0px 0px 10px;">
                <div class="well">
                    <div class="page-header clearfix">
                        <h3>菜单标题</h3>
                    </div>
                    <div class="alert">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="title" value="{{$field['title']}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="well">
                    <div class="arrow-left"></div>
                    <div class="page-header clearfix">
                        <h3>菜单设置</h3>
                    </div>
                    <!--菜单设置-->
                    <div class="alert">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" ng-model="active.name">
                            </div>
                        </div>
                        <div class="form-group menus_setting" ng-if="active.sub_button.length==0">
                            <label class="col-sm-2 control-label">动作</label>
                            <div class="col-xs-10">
                                <!--按钮类型-->
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="view"> 链接地址
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="click"> 触发关键字
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="scancode_push"> 扫码推事件
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="scancode_waitmsg"> 扫码带提示
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="pic_sysphoto"> 系统拍照发图
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="pic_photo_or_album"> 拍照或者相册发图
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="pic_weixin"> 微信相册发图
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="active.type" value="location_select"> 地理位置
                                    </label>
                                </div>
                                <hr/>
                                <!--链接-->
                                <div ng-show="active.sub_button.length==0 && active.type=='view'">
                                    <div class="input-group">
                                        <input class="form-control" type="text" ng-model="active.url">
                                        <div class="input-group-btn">
                                            <button class="btn btn-primary" type="button" ng-click="link.system()"><i class="fa fa-external-link"></i> 系统链接</button>
                                        </div>
                                    </div>
                                    <span class="help-block">指定点击此菜单时要跳转的链接（注：链接需加http://）</span>
                                </div>
                                <!--触发关键词-->
                                <div ng-show="active.sub_button.length==0 &&(active.type=='click'||active.type=='scancode_push'||active.type=='scancode_waitmsg' ||active.type=='pic_sysphoto' ||active.type=='pic_photo_or_album'||active.type=='pic_weixin'||active.type=='location_select')">
                                    <div class="input-group dropdown" id="btnKeyword">
                                        <input type="text" class="form-control" ng-model="active.key">
                                        <ul class="dropdown-menu" style="width:85%;"></ul>
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="button" data-toggle="dropdown" href="#btnKeyword" ng-click="link.search($event)">
                                                <i class="fa fa-search"></i> 搜索
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <textarea name="data" hidden="hidden"></textarea>
                <button type="submit" class="btn btn-primary">保存菜单</button>
            </div>
        </div>
    </form>
</block>
<script>
    require(['angular', 'underscore'], function (angular, _) {
        var m = angular.module('myApp', []);
        m.controller('ctrl', ['$scope', function ($scope) {
            $scope.data = angular.fromJson('{{$field["data"]}}');
            //当前编辑菜单
            $scope.active = $scope.data.button[0];
            //添加一级菜单
            $scope.addTopButton = function () {
                var menu = {type: 'view', name: '菜单名称', url: '', sub_button: []};
                $scope.data.button.push(menu);
                $scope.active = _.last($scope.data.button);
            }
            //删除一级菜单
            $scope.removeTopButton = function (item) {
                $scope.data.button = _.without($scope.data.button, item);
            }
            //删除二级菜单
            $scope.removeSubButton = function (item, k) {
                $scope.data.button[k].sub_button = _.without($scope.data.button[k].sub_button, item);
                $scope.active = _.last($scope.data.button[k].sub_button);
            }
            //添加子菜单
            $scope.addSubButton = function (k) {
                var menu = {type: 'view', name: '菜单名称', url: '', sub_button: []};
                $scope.data.button[k].sub_button.push(menu);
                $scope.active = _.last($scope.data.button[k].sub_button);
            }
            //编辑菜单
            $scope.editTopMenu = function (k) {
                $scope.active = $scope.data.button[k];
            }
            //编辑子菜单
            $scope.editSubMenu = function (k, i) {
                $scope.active = $scope.data.button[k].sub_button[i];
            }
            //链接
            $scope.link = {
                system: function () {
                    util.linkBrowser(function (link) {
                        $scope.active.url = link;
                        $scope.$apply();
                    });
                },
                //选择关键字
                search: function (e) {
                    var btn = e.target;
                    var ipt = $(btn).parents('div').eq(0).find('input');
                    var val = ipt.val();
                    var ul = $(btn).parents('div').eq(0).find('ul');
                    $.post('?s=site/keyword/getKeywords', {key: val}, function (data) {
                        var html = '';
                        if (data.length == 0) {
                            html += "<li><a href='javascript:;'>没有匹配到你输入的关键词</a></li>";
                        } else {
                            $(data).each(function (i) {
                                html += "<li><a href='javascript:;' class='res_key'>" + data[i].content + "</a></li>";
                            })
                            $(ul).delegate('.res_key', 'click', function () {
                                $scope.active.key = $(this).text();
                                $scope.$apply();
                            })
                        }
                        ul.html(html);
                    });
                }
            };

            $('form').submit(function () {
                $("[name='data']").val(angular.toJson($scope.data));
                var msg = '';
                if ($("[name='title']").val() == '') {
                    msg += '请设置菜单标题<br/>';
                }
                if ($scope.data.button.length == 0) {
                    msg += '请添加菜单,最少要有一个菜单<br/>';
                }
                var error = {name: '', action: ''};
                angular.forEach($scope.data.button, function (val, index) {
                    if ($.trim(val.name) == '') {
                        this.name += '第' + (index + 1) + '个一级菜单未设置菜单名称<br>';
                    }
                    if (val.sub_button.length > 0) {
                        angular.forEach(val.sub_button, function (v, index1) {
                            if ($.trim(v.name) == '') {
                                this.name += '第' + (index + 1) + '个一级菜单中的第' + (index1 + 1) + '个二级菜单未设置菜单名称<br>';
                            }
                            if ((v.type == 'view' && $.trim(v.url) == '') || ((v.type != 'view' && v.type != 'media_id' && v.type != 'view_limited') && $.trim(v.key) == '') || ((v.type == 'media_id' || v.type == 'view_limited') && !$.trim(v.media_id))) {
                                this.action += '菜单【' + val.name + '】的子菜单【' + v.name + '】未设置操作选项. <br />';
                            }
                        }, error);
                    } else {
                        if ((val.type == 'view' && $.trim(val.url) == '') || ((val.type != 'view' && val.type != 'media_id' && val.type != 'view_limited') && $.trim(val.key) == '') || ((val.type == 'media_id' || val.type == 'view_limited') && !$.trim(val.media_id))) {
                            this.action += '菜单【' + val.name + '】不存在子菜单并且未设置操作选项. <br />';
                        }
                    }
                }, error);
                if (msg) {
                    util.message(msg, '', 'error');
                    return false;
                }
                if (error.name) {
                    util.message(error.name, '', 'error');
                    return false;
                }
                if (error.action) {
                    util.message(error.action, '', 'error');
                    return false;
                }

            });

        }]);
        angular.bootstrap(document.getElementById('form'), ['myApp']);
    });
</script>